<template>
  <div class="personal-center">
    <div class="personal-info clearfix">
      <div class="img__header fl">
        <img :src="imgSrc" class="header-img">
      </div>
      <div class="user-mame__header fl">{{userName}}</div>
    </div>
    <div class="redwine">
      <div class="title" @click="toggleCabinet('redWine')">
        <div class="fl">我的红酒柜</div>
        <div :class="[{reserve__redwine: redWineArrowReserve}, 'arrow-icon', 'fr']"></div>
      </div>
      <div v-if="redWineShow" :class="['content', {overflow: redWineList.length >= 6}]">
        <div 
          v-for="(item,index) in redWineList" 
          :key="index"  
          @click="goUrlEdit(item)"
          class="item vux-1px-b">
          <div class="item--img"></div>
          <div class="item--detail">
            <p class="name">{{ item.device_name ? item.device_name : item.device_mac}}</p>
            <p class="type">美晶红酒柜</p>
          </div>
          <div class="item--arrow"></div>
        </div>
      </div>
    </div>
    <div class="cigar">
      <div class="title" @click="toggleCabinet()">
        <div class="fl">我的雪茄柜</div>
        <div :class="['arrow-icon', 'fr', {reserve__cigar: cigarArrowReserve}]"></div>
      </div>
      <div class="content" v-if="cigarShow">
        <div 
          v-for="(item, index) in cigarList" 
          :key="index" 
          @click="goUrlEdit(item)"  
          class="item vux-1px-b" >
          <div class="item--img"></div>
          <div class="item--detail">
            <p class="name">{{ item.device_name ? item.device_name : item.device_mac }}</p>
            <p class="type">美晶雪茄柜</p>
          </div>
          <div class="item--arrow"></div>
        </div>
      </div>
    </div>
    <div class="add-icon" @click="addDevice"></div>
  </div>
</template>
<script>
import api from '@/api'
import _ from 'lodash'
import wx from 'weixin-js-sdk'
import { REDWINEPRODUCTID, CIGARPRODUCTID } from '@/config/product-id'
export default {
  name: 'cigarPersonalCenter',
  data () {
    return {
      userName: '',
      imgSrc: '',
      redWineShow: true,
      cigarShow: true,
      redWineArrowReserve: false,
      cigarArrowReserve: false,
      devicesList: []
    }
  },
  mounted () {
    this.$Title.set('美晶智能个人中心')
    this.initalize()
  },
  computed: {
    redWineList () {
      return _.filter(this.devicesList, device => {
        return device.device_pid === REDWINEPRODUCTID
      })
    },
    cigarList () {
      return _.filter(this.devicesList, device => {
        return device.device_pid === CIGARPRODUCTID
      })
    }
  },
  methods: {
    // 切换酒柜
    toggleCabinet (redwine) {
      if (redwine) {
        this.redWineArrowReserve = !this.redWineArrowReserve
        this.redWineShow = !this.redWineShow
      } else {
        this.cigarArrowReserve = !this.cigarArrowReserve
        this.cigarShow = !this.cigarShow
      }
    },
    // 跳转编辑页
    goUrlEdit (device) {
      let devieId = device.device_id
      this.$router.push({name: 'firmware', params: {device_id: devieId}})
    },
    // 添加设备
    addDevice () {
      wx.scanQRCode()
    },
    initalize () {
      this.fetchDeviecList()
      this.fetchUserInfo()
    },
    // 获取列表
    async fetchDeviecList () {
      let { data: {devices} } = await api.getDeviceList()
      this.devicesList = devices
    },
    // 获取用户信息
    async fetchUserInfo () {
      let { data: {nickname, headimgurl} } = await api.getUserInfo()
      this.userName = nickname
      this.imgSrc = headimgurl
    }
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/1px.less';
  .personal-center {
    height: 100%;
    .personal-info {
      height: 2.747rem;
      padding: 15px;
      box-sizing: border-box;
      .img__header {
        height: 1.733rem;
        line-height: 1.733rem;
        width: 1.733rem;
        border-radius: 0.53rem;
        border: 1px solid #efefef;
        .header-img {
          width: 100%;
          height: 100%;
          border-radius: 0.53rem;
        }
      }
      .user-mame__header {
        height: 1.733rem;
        line-height: 1.733rem;
        margin-left: 0.4rem;
        font-size: 16px;
      }
    }
    .redwine, .cigar{
      .title {
        height: 1.173rem;
        line-height: 1.173rem;
        background-color: #efefef;
        font-size: 14px;
        padding-left: 15px;
        .arrow-icon {
          width: 30px;
          height: 1.173rem;
          padding-right: 15px;
          background: url('../../assets/cigrImage/arrow_down.png') no-repeat center;
          background-size: 0.373rem 0.373rem;
          transition-duration: .3s;
        }
        .reserve__redwine, .reserve__cigar {
          transform: rotateZ(-180deg);
          transform-origin: 50% 50%;
        }
      }
      .content {
        background-color: #fff;
        padding-left: 15px;
        .item {
          position: relative;
          height: 1.813rem;
          &--img {
            position: absolute;
            width: 1.147rem;
            height: 1.813rem;
            background: url('../../assets/cigrImage/wine.png') no-repeat center;
            background-size: 1.147rem 1.147rem;
          }
          &--detail {
            top: 0.333rem;
            position: absolute;
            left: 1.52rem;
            height: 1.48rem;
            .name {
              font-size: 16px;
            }
            .type {
              color: #9fa0a0;
            }
          }
          &--arrow {
            position: absolute;
            width: 1.147rem;
            height: 1.813rem;
            right: 0px;
            background: url('../../assets/cigrImage/arrow_right.png') no-repeat center;
            background-size: 0.373rem 0.373rem;
          }
        }
        &.overflow {
          // height: 12.693rem;
          height: 10.874rem;
          overflow: auto;
        }
      }
    }
    .cigar {
      .content {
        .item--img {
          background: url('../../assets/cigrImage/cigar.png') no-repeat center;
          background-size: 1.147rem 1.147rem;
        }
      }
    }
    .add-icon {
      width: 1.733rem;
      height: 1.733rem;
      border-radius: 50%;
      position: fixed;
      bottom: 0.96rem;
      right: 0.587rem;
      z-index: 0;
      background-image: url('../../assets/cigrImage/personal_center_add.png');
      background-size: 1.733rem 1.733rem;
    }
  }
</style>
